<template>
  <div class="app-container">
     <div>
        连接状态：
        <span :class="statusList[status].color">
          {{ statusList[status].text }}
        </span>
      </div>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="输入内容" prop="text">
          <el-col :span="5">
            <el-input v-model="form.text" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">发送</el-button>
        </el-form-item>
      </el-form>
      <el-divider>聊天记录</el-divider>
      <div class="msg-box" v-show="msgList.length">
        <div
          :class="{ pt: index % 2 == 0 }"
          class="msg-item"
          v-for="(item, index) in msgList"
          :key="index"
        >
          <div class="msg-content">
            <div class="msg-text">{{ item }}</div>
          </div>
        </div>
      </div>
  </div>
</template>
<script setup>
import { ref, onBeforeUnmount, reactive } from "vue";
import { ElMessage } from "element-plus";
const msgList = reactive([]);
const formRef = ref(null);
const form = reactive({
  text: "",
});
const rules = reactive({
  text: [{ required: true, message: "输入的内容不能为空", trigger: "blur" }],
});
const onSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      send(form.text);
      ElMessage.success("发送成功");
    } else {
      console.log(valid);
    }
  });
};
let socket = null;
const status = ref(0);
const statusList = reactive([
  {
    color: "text-purple-500",
    text: "建立连接中...",
  },
  {
    color: "text-green-500",
    text: "连接成功",
  },
  {
    color: "text-red-500",
    text: "连接失败",
  },
  {
    color: "text-purple-500",
    text: "连接关闭",
  },
]);
const open = (e) => {
  status.value = 1;
};
const send = (msg) => {
  socket.send(msg);
  msgList.push(msg);
};
const message = (e) => {
  msgList.push(e.data);
};
const error = (e) => {
  status.value = 2;
  console.log("error", e);
  ElMessage.error('连接异常，请尝试刷新页面')
};
const close = (e) => {
  status.value = 3;
  console.log("close", e);
};
const init = () => {
  socket = new WebSocket("wss://javascript.info/article/websocket/chat/ws");
  socket.onopen = open;
  socket.onmessage = message;
  socket.onerror = error;
  socket.onclose = close;
};
init();
onBeforeUnmount(() => {
  socket.close();
});
</script>
<style lang="scss">
.msg-box {
  width: 400px;
  background: #eee;
  padding: 20px;
  margin: 0 auto;
  .msg-item {
    display: flex;
    margin: 25px 0;
    color: #333;
    .msg-content {
      width: 200px;
      background: #fff;
      padding: 10px;
      border-radius: 12px;
      position: relative;
      &::after {
        content: "";
        width: 0;
        height: 0;
        border: 10px solid;
        position: absolute;
        top: 13px;
        left: -18px;
        border-color: transparent #fff transparent transparent;
      }
    }
    &.pt {
      flex-flow: row-reverse;
      .msg-content {
        background: #67c23a;
        &::after {
          top: 13px;
          left: unset;
          right: -18px;
          border-color: transparent transparent transparent #67c23a;
        }
        .msg-date {
          text-align: right;
        }
      }
    }
  }
}
</style>